Vue.createApp({
    template: "#my-app",
    data() {
        return {
            books: [
                {
                  id: 1,
                  name: '《算法导论》',
                  date: '2006-9',
                  price: 85.00,
                  count: 1
                },
                {
                  id: 2,
                  name: '《UNIX编程艺术》',
                  date: '2006-2',
                  price: 59.00,
                  count: 1
                },
                {
                  id: 3,
                  name: '《编程珠玑》',
                  date: '2008-10',
                  price: 39.00,
                  count: 1
                },
                {
                  id: 4,
                  name: '《代码大全》',
                  date: '2006-3',
                  price: 128.00,
                  count: 1
                },
              ]
        }
    },
    methods: {
      increment(index) {
        // 通过索引获取点击的对象
        this.books[index].count++;
      },
      decrement(index) {
        this.books[index].count--;
      },
      removeBook(index) {
        this.books.splice(index, 1);
      },
      formatPrice(price) {
        return "￥" + price;
      }
    },
    computed: {
      totalPrice() {
        let finalPrice = 0;
        for(let book of this.books) {
          finalPrice += book.price * book.count
        }
        return finalPrice; 
      },
      // Vue3不支持过滤器
      filterBooks() {
        return this.books.map(item => {
          // Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。
          // 它将返回目标对象。
          const newItem = Object.assign({}, item);
          newItem.price = '￥' + item.price;
          return newItem;
        })
      }
    }
}).mount('#app');